<template>
<!-- 个人简介诶 -->
    <view class="load" v-if="!load">
        <u-loading-icon
            mode="circle"
            inactive-color="#fff"
            text="正在加载..."
            vertical
        ></u-loading-icon>
    </view>
    <view class="wap introduce" v-else>
        <view class="introduce_con">
            <view class="txt">
                <u--textarea
                    maxlength="100"
                    v-model="reqData.Descript"
                    border="bottom"
                    count
                    placeholder="个人简介"
                ></u--textarea>
            </view>
        </view>
        <!-- 图片九宫格 -->
        <view
            class="imgvideo"
            v-if="localList.length == 0 || localList[0].fileType == 'image'"
        >
            <view
                class="item"
                @click="selectImg(index)"
                v-for="(item, index) in localList"
                :key="index"
            >
                <view class="del_con" @click.stop="delImg(index)">
                    <uni-icons
                        type="closeempty"
                        color="#fff"
                        size="16"
                    ></uni-icons>
                </view>
                <image :src="item.tempUrl" mode="aspectFill" />
                <view class="pro" v-if="item.pro != 100"
                    >已上传:{{ item.pro + "%" }}</view
                >
            </view>
            <view
                class="item item_add"
                v-if="localList.length < 9"
                @click="selectImg()"
            ></view>
        </view>

        <view class="btm_btn wap">
            <view class="btn" @click="sub">保存</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
             load:false,
            localList: [
                // {
                //     tempKey:'',//标识 随机生成 以便更改状态 和 删除
                //     duration:"",//时长
                //     fileType:"",//类型
                //     tempUrl:"",//封面
                //     flieUrl:"",//路径
                //     status:1 //1上传中 2.上传是啊比
                //     netPath // 线上路径
                // }
            ],

            reqData: {
                UserID:"",
                Descript: "",
                UserImgs: "",
            },
        };
    },
    methods: {
        async init() {
            let u = uni.getStorageSync("user");
            let res = await this.$api.post("User/GetUserInfo", {
                ID: u.UserID,
            });
            this.reqData.Descript = res.data.Descript;
            this.reqData.UserID = res.data.ID;
            let list = JSON.parse(res.data.UserImgs);
            if(Array.isArray(list)){
                list.forEach(item => {
                    item.flieUrl
                    let o = {
                        duration: 0,
                        fileType: 'image',
                        tempUrl: item,
                        flieUrl: item,
                        netPath:item,
                        tempKey: uni.$u.guid(8),
                        pro: 100,

                    }
                    this.localList.push(o);
                })
            }
            // 图片处理
            this.load = true;
        },
        openPopupTip() {
            this.$refs.popupTip.open();
        },
        closePopupTip() {
            this.$refs.popupTip.close();
        },
        delImg(index) {
            console.log(index);
            this.localList.splice(index, 1);
        },
        // 文件选择
        selectImg(index) {
            let ind = index >= 0 ? index : -1;
            let _this = this;
            let con;
            let mediaType;
            // 首次选择
            console.log(ind, this.localList.length);
            if (ind == -1 && this.localList.length == 0) {
                con = 1;
                mediaType = ["image"];
                console.log(con, "----------首次选择");
            } else if (
                index == 0 &&
                this.localList.length == 1 &&
                this.localList[0].fileType == "video"
            ) {
                con = 1;
                mediaType = ["image"];
            } else {
                con = ind != -1 ? 1 : 9 - _this.localList.length;
                mediaType = ["image"];
            }
            uni.chooseMedia({
                count: con,
                mediaType: mediaType,
                sourceType: ["album", "camera"],
                maxDuration: 30,
                camera: "back",
                success(res) {
                    res.tempFiles.forEach(async (item) => {
                        let o;
                        if (item.fileType === "image") {
                            o = {
                                duration: 0,
                                fileType: item.fileType,
                                tempUrl: item.tempFilePath,
                                flieUrl: item.tempFilePath,
                                tempKey: uni.$u.guid(8),
                                pro: 0,
                            };
                        } else {
                            o = {
                                duration: item.duration,
                                fileType: item.fileType,
                                tempUrl: item.thumbTempFilePath,
                                // item.
                                flieUrl: item.tempFilePath,
                                tempKey: uni.$u.guid(8),
                                pro: 0,
                            };
                            uni.getImageInfo({
                                src: item.thumbTempFilePath,
                                success: function (image) {
                                    console.log(
                                        "封面信息:W" +
                                            image.width +
                                            "H" +
                                            image.height
                                    );
                                    let max = 560;
                                    if (image.height > image.width) {
                                        _this.vHight = max;
                                        _this.vWidth =
                                            max * (image.width / image.height);
                                    } else {
                                        max = 600;
                                        _this.vWidth = max;
                                        _this.vHight =
                                            max * (image.height / image.width);
                                    }
                                },
                            });
                        }
                        if (ind == -1) {
                            _this.localList.push(o);
                        } else {
                            _this.localList.splice(ind, 1, o);
                        }
                        await _this.uploading(o.flieUrl, o.tempKey);
                    });
                    console.log(res.tempFiles);
                },
            });
        },
        // 文件上传
        async uploading(url, tempKey) {
            let r = await this.$api.upload(
                "/Community/Upload",
                {
                    path: url,
                },
                (pro) => {
                    this.localList.forEach((item) => {
                        if (item.tempKey == tempKey) {
                            item.pro = pro;
                        }
                    });
                }
            );
            this.localList.forEach((item) => {
                if (item.tempKey == tempKey) {
                    item.netPath = r;
                }
            });
        },
        async sub() {
          
            this.reqData.UserImgs = JSON.stringify(this.localList.map(item => {
                return item.netPath
            }))

            this.$pv.load("正在处理");
            let res = await this.$api.post("User/UpdateUserDescript", this.reqData);
            if (res.code == 0) {
                this.$pv.closeLoad();
                this.$pv.msg("已保存");
                this.nav_back(2000);
            }
        },
    },
    onLoad(){
        this.init();
    }
};
</script>

<style lang="scss">
.introduce {
    padding-bottom: 200rpx;
}
.imgvideo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &::after {
        height: 1px;
        width: 220rpx;
        display: block;
        content: "";
    }
}
.item {
    position: relative;
    margin-top: 15rpx;
    width: 220rpx;
    height: 220rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;
    .pro {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        text-align: center;
        color: #888;
    }
    image {
        height: 100%;
        width: 100%;
        border-radius: 16rpx;
    }
    .del_con {
        position: absolute;
        top: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.4);
        height: 40rpx;
        width: 40rpx;
        text-align: center;
        line-height: 40rpx;
        border-radius: 0 16rpx 0 16rpx;
    }
}
.video_box {
    margin-top: 20rpx;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background: #202020;
    display: flex;
    justify-content: center;
    border-radius: 16rpx;
    overflow: hidden;
    .pro {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        text-align: center;
        color: #888;
    }

    .del_con {
        position: absolute;
        top: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.4);
        height: 40rpx;
        width: 40rpx;
        text-align: center;
        line-height: 40rpx;
        border-radius: 0 16rpx 0 16rpx;
    }
}
.item_add {
    position: relative;
    &::before,
    &::after {
        display: block;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        height: 40rpx;
        width: 8rpx;
        border-radius: 8rpx;
        background: #fff;
        border-radius: 10rpx;
    }
    &::before {
        transform: rotate(90deg);
    }
}
.introduce_con {
    margin-top: 20rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    background: #202020;
    border-radius: 16rpx;
    .tit {
        height: 100rpx;
        border-bottom: 1px solid #404040;
        input {
            height: 100rpx;
            width: 100%;
            font-weight: 32rpx;
        }
    }
    .txt {
        min-height: 200rpx;
        height: 200rpx;
        /deep/ .u-textarea {
            background: none !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            border-bottom: none !important;
        }
        /deep/ .u-textarea__count {
            background: none !important;
            color: #fff !important;
        }
        /deep/ textarea {
            color: #fff !important;
        }
        /deep/ .textarea-placeholder {
            color: #a8a8a8 !important;
        }
    }
}
.tip {
    padding-bottom: 20rpx;
    background: #fff;
    border-radius: 10rpx 10rpx 0 0;
    .tit {
        line-height: 90rpx;
        text-align: center;
        color: #333;
    }
    .txt {
        .c2 {
            color: #666;
        }
    }
    .mb30 {
        margin-bottom: 30rpx;
    }
}
.mt20 {
    margin-top: 20rpx;
}
.btm_tip {
    font-size: 28rpx;
    line-height: 1.8;
    margin-bottom: 40rpx;
}
.btm_btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 220rpx;
    background: #000;
}
</style>